<template>
  <div class="main_box" v-loading="loading">
    <el-row type="flex" justify="center" class="half_bottom">

      <!--赛事动态-->
      <el-col :xs="23" :sm="23" :md="18" :lg="18" :xl="18" class="Events">
        <div class="Events_title">
          <div class="Events_title_left">
            <h1>赛事动态</h1>
          </div>
        </div>
        <div class="Events_list" v-for="item of tableData" :key="item.key">
          <div class="list_img">
            <el-image fit="fill" :src="item.images" clss="image">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <el-col :xs="13" :sm="15" :md="15" :lg="17" :xl="22" class="Events_list_text">
            <div class="list_text_title">
              <div class="text_title">
                <div class="title_one" @click="goText(item.id)"><a href="/information/DynamicArticles">{{ item.title }}</a></div>
                <div class="title_time">{{ item.applyTime }}</div>
              </div>
            </div>
            <div class="list_text_main">
                <span>{{item.summary}}</span>
            </div>
          </el-col>
        </div>

      </el-col>
      <!--赛事动态-->
    </el-row>

    <el-pagination
        class="button"
        background
        :current-page.sync="curPage"
        layout="prev, pager, next"
        :total="allPage"
        @current-change="hCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "EventDynamics",
  data() {
    return{
      tableData: [],
      // nOutside: [require('@/imgs/outside/1.jpeg')],
      curPage: 1,  //当前页数
      allPage: 1, //总页数
      loading: true
    }
  },
  methods:{
    async hCurrentChange(curPage){
      this.loading = true;
      const data2 = {};
      data2.classification = '赛事动态';
      data2.pages = curPage;
      data2.number = '5';
      const eventDynamics = await this.$api.getAriticle(data2);//data2
      this.tableData = eventDynamics.data.page.records;
      this.loading = false;
    },
    //  获取公告和赛事动态
    async GetAriticle1(){
      this.loading = true;
      const data2 = {};
      data2.classification = '赛事动态';
      data2.pages =  this.curPage;
      data2.number = '8';
      const eventDynamics = await this.$api.getAriticle(data2);//data2
      this.tableData = eventDynamics.data.page.records;
      this.allPage = eventDynamics.data.page.pages*10;
      this.loading = false;
    },
    //  去文章页面，这里先存一下id
    goText(id){
      window.sessionStorage.setItem('TextID',id);
    }
  },
  mounted() {
    this.GetAriticle1();
  }
}
</script>

<style lang="less" scoped>
.main_box{
  height: 1030px;
  background-color: #ffffff;
  margin: 0 40px;
  .half_bottom{
    .Events{
      background-color: #ffffff;
      padding: 20px;
      .Events_title{
        font-weight: 502;
        display: flex;
        justify-content: space-between;
        //.Events_title_right{
        //  line-height: 72px;
        //}
      }
      .Events_list{
        border-top: 1px solid #909399;
        padding: 20px 10px;
        display: flex;
        .list_img{
          width: 220px;
          min-width: 220px;
          height: 160px;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .Events_list_text{
          //width: 100%;
          padding: 0 20px;
          .list_text_title{
            .text_title{
              display: flex;
              justify-content: space-between;
              .title_one{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 80%;
                font-size: 20px;
                font-weight: 500.5;
                &.title_one a{
                  text-decoration: none;
                  color: #000509;
                }
                &.title_one a:hover{
                  color: #409EFF;
                }
              }
              .title_time{
                line-height: 33px;
              }
            }
          }
          .list_text_main{
            margin: 10px 0;
            font-size: 1.1em;
            text-indent: 2em;
            letter-spacing: 2px;
            line-height: 25px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
        }
      }
    }
  }

  .button{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }

}
</style>
